import React,{ Component } from "react";

export default class Hello extends Component {
    // 事件定义形式  是  箭头函数
    handler = (e) => {
        console.log("this", e);  // 有 this
    }

    // 普通函数 的 传参
    argHandler(n, i) {
        console.log("普通函数传参", n, i)
    }
    argumentHandler = n => {
        console.log(n)
    }
    render() {
        /**
         *  React 中事件绑定的事件类型要求是大写
         *      Click
         *      KeyDown
         *      MouseOver
         *   React中的事件【绑定在 jsx 上的】属于合成【封装】事件
         *   React中事件的事件对象
         *      React e 是类，是封装的一个类，但是里面东西和原生事件 e 是一样的
         *   React中事件的传参
         *      如果是 普通函数，建议使用bind来做传参
         *      如果你是箭头函数，在调用这个箭头函数时，在它外层包裹一层箭头函数
         */
        return (
            <div>
                <button onClick={this.handler}> 箭头函数的实现 </button>
                <button onClick={this.argHandler.bind(this, 10)}>普通函数传参</button>
                {/* <button onClick={this.argumentHandler(15)}>箭头函数传参</button> */}
                {/* 箭头函数 传参 会立即触发，上面的写法是不对的 */}
                <button onClick={() => {this.argumentHandler(15)}}>箭头函数传参</button>
            </div>
        )
    }
}

/**
 * 事件
 *   构成部分
 *     1. 事件源
 *     2. 事件类型  click/keydown/...
 *     3. 事件处理程序
 *    事件数据部分
 *      参数
 *          实参
 *          形参
 *      事件对象
 */